<template>
  <div class="mt12">
    <!--大屏主体内容-->
    <div class="__main mt12">
      <div class="__left">
        <left></left>
      </div>
      <div class="__center">
        <center></center>
      </div>
      <div class="__right"><right></right></div>
    </div>
    <!--大屏主体内容-->
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import countTo from "vue-count-to";
import pageTitle from "../components/pageTitle";
import itemBox from "../components/itemBox";
import subTit from "../components/subTit";
import center from "./components/center.vue";
import left from "./components/left.vue";
import right from "./components/right.vue";

let mixin = new drawMixin();
export default {
  name: "index",
  components: { countTo, pageTitle, itemBox, subTit, center, left, right },
  mixins: [mixin],
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.big-screen {
  background-image: url("~@/assets/img/bg.svg");
  display: grid;
  grid-template-rows: 110px auto;
  .mt12 {
    margin-top: 12px;
  }
  .mt24 {
    margin-top: 24px;
  }
  .__main {
    padding: 0 24px;
    display: grid;
    grid-template-columns: 470px auto 470px;
    grid-gap: 24px;

    .infrastructure {
      ._top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        .__num {
          .val {
            font-size: 24px;
            color: #00fffa;
            font-family: DINPro;
          }
          .unit {
            font-size: 16px;
            font-family: PingFangSC;
          }
        }
      }
    }
  }
}
</style>
